<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-23 13:40:13
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-12-23 14:44:19
-->
<template>
  <div v-if="dialog.csQrShow">
    <div class="cover"></div>
    <div class="box">
      <img src="../../assets/images/concantWe.jpg" alt="" />
    </div>
    <div class="onClose" @click="onClose">
      <img src="../../assets/images/onClose.jpg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "QRCode",
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  methods: {
    onClose() {
      this.dialog.csQrShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.cover {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  /*设置遮罩位于div的下方*/
  z-index: 10999;
  background-color: #000;
  opacity: 0.3;
}
.box {
  /* border: 1px solid grey; */
  /*当弹窗显示时，屏幕滚动时，弹窗始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置*/
  position: fixed;
  width: 376px;
  height: 399px;
  left: 50%;
  top: 50%;
  /*配合left:50%和top:50%属性使得浮出层的中心默认在屏幕正中，margin-top为height的一半，margin-left为width的一半*/
  margin: -245px 0 0 -200px;
  /*设置弹窗位于遮罩的上方*/
  z-index: 11999;
  /*开始时隐藏弹窗*/
  //   background-color: #fff;
  border-radius: 6px;
  img {
    width: 100%;
    height: 100%;
  }
}
.onClose {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 12999;
  margin: -280px 0 0 170px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>